﻿@page "/components/toast"

  <ToastContainer />
<Pager Title="Toast" Description="Push notifications to your visitors with a toast, a lightweight and easily customizable alert message."
Indicates="@(new[]{"Example","Colored message","Key"})">
    	<Demo Title="Example">
		<Description>
			Set <code>ToastContainer</code> component on page, 
			then get the injection of <code>IToastService</code> instance and call <code>Show</code> method to show toast message.
		</Description>
		<Run>
            <Button Color="Color.Primary" OnClick="@(e=>ToastService.Show("Here is an example toast to show"))">Click to show</Button>
          
		</Run>
		<Code>
			@MD.Write(@"
```html
<!-- Put this container first -->
<ToastContainer />

<!-- Get injection of IToastService -->
@inject IToastService ToastService

<!-- Call 'Show' method to display toast message-->
<Button Color=""Color.Primary"" OnClick=""@(e=>ToastService.Show(""Here is an example toast to show""))"">Click to show</Button>
```
			")
		</Code>
	</Demo>
		<Demo Title="Colored message">
		<Description>
			There are different kind of color messages.
		</Description>
		<Run>
			
            <Button Color="Color.Primary" OnClick="@(e=>ToastService.ShowPrimary("Primary message"))">Primary</Button>
            <Button Color="Color.Secondary" OnClick="@(e=>ToastService.ShowSecondary("Secondary message"))">Secondary</Button>
            <Button Color="Color.Info" OnClick="@(e=>ToastService.ShowInfo("Info message"))">Info</Button>
            <Button Color="Color.Success" OnClick="@(e=>ToastService.ShowSuccess("Success message"))">Success</Button>
            <Button Color="Color.Warning" OnClick="@(e=>ToastService.ShowWarning("Warning message"))">Warning</Button>
            <Button Color="Color.Danger" OnClick="@(e=>ToastService.ShowDanger("Danger message"))">Danger</Button>
            <Button Color="Color.Light" OnClick="@(e=>ToastService.ShowLight("Light message"))">Light</Button>
            <Button Color="Color.Dark" OnClick="@(e=>ToastService.ShowDark("Dark message"))">Dark</Button>
          
		</Run>
		<Code>
			@MD.Write(@"
```html
<Button Color=""Color.Primary"" OnClick=""@(e=>ToastService.ShowPrimary(""Primary message""))"">Primary</Button>
<Button Color=""Color.Secondary"" OnClick=""@(e=>ToastService.ShowSecondary(""Secondary message""))"">Secondary</Button>
<Button Color=""Color.Info"" OnClick=""@(e=>ToastService.ShowInfo(""Info message""))"">Info</Button>
<Button Color=""Color.Success"" OnClick=""@(e=>ToastService.ShowSuccess(""Success message""))"">Success</Button>
<Button Color=""Color.Warning"" OnClick=""@(e=>ToastService.ShowWarning(""Warning message""))"">Warning</Button>
<Button Color=""Color.Danger"" OnClick=""@(e=>ToastService.ShowDanger(""Danger message""))"">Danger</Button>
<Button Color=""Color.Light"" OnClick=""@(e=>ToastService.ShowLight(""Light message""))"">Light</Button>
<Button Color=""Color.Dark"" OnClick=""@(e=>ToastService.ShowDark(""Dark message""))"">Dark</Button>
```
			")
		</Code>
	</Demo>
		<Demo Title="Key">
		<Description>
			You can have many <code>ToastContainer</code> components with different of keys for each configuration.
		</Description>
		<Run>
			<ToastContainer Placement="ToastPlacement.BottomRight" Key="Toast-BR"/>
			<Button Color="Color.Primary" OnClick="@(e=>ToastService.Show("Message on top right with default key"))">Default placement</Button>
			<Button Color="Color.Dark" OnClick="@(e=>ToastService.Show("Message on bottom right with custom key",key:"Toast-BR"))">Bottom Right placement</Button>
		</Run>
		<Code>
			@MD.Write(@"
```html
<ToastContainer Placement=""ToastPlacement.BottomRight"" Key=""Toast-BR""/>
<Button Color=""Color.Primary"" OnClick=""@(e=>ToastService.Show(""Message on top right with default key""))"">Default placement</Button>
<Button Color=""Color.Dark"" OnClick=""@(e=>ToastService.Show(""Message on bottom right with custom key"",key:""Toast-BR""))"">Bottom Right placement</Button>
```
			")
		</Code>
	</Demo>
</Pager>
@inject IToastService ToastService